<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { Table } from '@/components/Table'
import { ref } from 'vue'
import { ElButton, ElEmpty, ElTag } from 'element-plus'
import { TableColumn, TableSlotDefault } from '@/types/table'
import { ApplicationInfo } from '@/api/types/ApplicationInfo'
import { getList } from '@/api/application'
import { useRouter } from 'vue-router'
import { CirclePlus } from '@element-plus/icons-vue'
import { Dialog } from '@/components/Dialog'
import { CreateApp } from './components'
import { BaseInfo, VersionInfo } from './components'

const columns: TableColumn[] = [
  {
    field: 'id',
    label: '应用ID'
  },
  {
    field: 'name',
    label: '应用名称'
  },
  {
    field: 'version',
    label: '版本'
  },
  {
    field: 'status',
    label: '状态'
  },
  {
    field: 'cryptoMode',
    label: '加密模式'
  },
  {
    field: 'authMode',
    label: '授权模式'
  },
  {
    field: 'action',
    label: '操作'
  }
]

const loading = ref(true)
const showCreateApp = ref(false)

let tableDataList = ref<ApplicationInfo[]>([])

const getTableList = () => {
  getList()
    .catch(() => {})
    .finally(() => {
      loading.value = false
    })
    .then((res) => {
      if (res) {
        tableDataList.value = res.data
      }
    })
}

getTableList()

const router = useRouter()

const toDetail = (id: number) => {
  router.push({
    name: 'Application-Detail',
    params: {
      id
    }
  })
}

const actionFn = (data: TableSlotDefault) => {
  toDetail(data.row.id)
}
</script>

<template>
  <div>
    <div>
      <ElButton @click="showCreateApp = true" type="primary" :icon="CirclePlus">创建应用</ElButton>
    </div>
    <ContentWrap style="margin-top: 10px">
      <Table expand :selection="false" :columns="columns" :data="tableDataList" :loading="loading">
        <template #empty>
          <ElEmpty description="快去创建应用吧" />
        </template>
        <template #authMode="data">
          {{ data.row.authMode === 'user' ? '用户模式' : '设备ID模式' }}
        </template>
        <template #cryptoMode="data">
          {{ data.row.cryptoMode === 'none' ? '无' : data.row.cryptoMode.toUpperCase() }}
        </template>
        <template #status="data">
          <ElTag v-if="data.row.status === 'published' && !data.row.deactivated" type="success"
            >正常</ElTag
          >
          <ElTag v-if="data.row.status === 'disabled' && !data.row.deactivated" type="warning"
            >禁用</ElTag
          >
          <ElTag v-if="data.row.deactivated" type="danger">停用</ElTag>
        </template>
        <template #action="data">
          <ElButton
            v-if="!data.row.deactivated"
            size="small"
            type="primary"
            @click="actionFn(data as TableSlotDefault)"
            >管理</ElButton
          >
        </template>
        <template #expand="data">
          <BaseInfo notUpdate @get-appdata="getTableList" :app="data.row" />
          <VersionInfo notUpdate @get-appdata="getTableList" :app="data.row" />
        </template>
      </Table>
    </ContentWrap>
    <div>
      <Dialog
        :fullscreen="false"
        style="width: 680px; max-width: 80%"
        v-model="showCreateApp"
        title="创建应用"
      >
        <CreateApp @success="getTableList" @closedialog="showCreateApp = false" />
      </Dialog>
    </div>
  </div>
</template>
